<template>
    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
        <div class="sidebar-container">
            <!-- 左边导航伸展 -->
            <div :class="{'navbar-header':sidebar.opened}">
                <div class="bg-primary h">
                    <div v-if="sidebar.opened">
                        <div class="visible-xs navbar-header pull-right">
                            <button class="dk">
                                <i class="glyphicon glyphicon-cog"></i>
                            </button>
                            <button>
                                <i class="glyphicon glyphicon-align-justify"></i>
                            </button>
                        </div>
                        <!-- brand -->
                        <a href="#/" class="navbar-brand text-lt">
                            <!--<i class="fa fa-btc"></i>-->
                            <img src="src/assets/img/logo.png" alt=".">
                            <span class="hidden-folded m-l-xs">指管装</span>
                        </a>
                        <!-- / brand -->
                    </div>
                </div>
                <el-menu mode="vertical" theme="dark" :default-active="$route.path" :collapse="sidebar.opened">
                </el-menu>
            </div>
        </div>
        <div class="main-container b-l" :class="{'hidden-xs':sidebar.opened}">
            <!-- 详情页头部区域div -->
            <div class="h bg-white-only box-shadow">
                <a class="btn no-shadow navbar-btn" v-on:click="slideHeader()">
                    <i class="fa fa-fw" :class="{'fa-dedent':sidebar.opened,'fa-indent':!sidebar.opened}"></i>
                </a>
            </div>
            <!-- / 详情页头部区域div -->

            <!-- 这里才是内容区域 -->
            <!-- <navbar></navbar>
            <app-main></app-main> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'indexPage',
    computed: {
        sidebar() {
            return this.$store.state.app.sidebar;
        }
    },
    methods: {
        slideHeader(){
            this.$store.state.app.sidebar.opened = !this.$store.state.app.sidebar.opened;
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/scss/mixin.scss";
.app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.hideSidebar {
        .sidebar-container{
            width:36px;
            overflow: inherit;
        }
        .main-container {
            margin-left: 36px;
        }
    }
    .sidebar-container {
        transition: width 0.28s ease-out;
        width: 360px;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        &::-webkit-scrollbar {display:none}
        @media (max-width: 768px) {
            width: 100%
        }
    }
    .main-container {
        min-height: 100%;
        transition: margin-left 0.28s ease-out;
        margin-left: 360px;
    }
}
</style>

